<template>
  <el-aside
    width="160px"
    class="hui-navbar">
    <el-container direction="vertical" class="hui-h-100vh">
      <hpro-header
        type="custom"
        :title="title || data.title"
        v-if="title || data.title">
      </hpro-header>
      <el-main class="hui-navbar__main">
        <el-scrollbar class="hui-h-100" wrap-class="hui-overflow-x-hidden">
          <el-menu
            class="hui-navbar__menu"
            :default-active="defaultActive"
            router
            v-if="menu || data.menu">
            <el-menu-item
              v-for="item in ( menu || data.menu )"
              :index="item.link"
              :key="item.index">
              {{ item.name }}
            </el-menu-item>
          </el-menu>
          <slot></slot>
        </el-scrollbar>

      </el-main>
    </el-container>
  </el-aside>
</template>

<script>
/**
 * hpro-navbar
 * @module components/hpro-navbar
 * @desc 副导航栏
 *
 * @param { string } title - 标题
 * @param { array } menu - 菜单的设置, 其中菜单的参数包含link: 链接地址, name: 显示名称
 * @param { object } data - 数据, 上述两个数据统一设置一个object
 */
export default {
  name: 'hpro-navbar',
  componentName: 'hpro-navbar',
  props: {
    data: Object,
    title: String,
    menu: Array
  },
  data () {
    return {
      defaultActive: ''
    }
  },
  created () {
    this.getRouteMatched()
  },
  methods: {
    getRouteMatched () {
      let routeMatched = this.$route.matched
      this.defaultActive = routeMatched[2].path
    }
  },
  watch: {
    '$route': 'getRouteMatched'
  }
}
</script>

<style lang="less">
  @import "../../common/h-theme/_variable";

  .hui-navbar {
    flex: none;
    height: 100vh;
    border-right: @--border-base;
    background-color: @--background-color-base;
  }

  .hui-navbar__main {
    padding: 0;
    height: calc(100vh - 60px);
  }

  .hui-navbar__menu {
    border-right: none;
    background-color: @--background-color-base;

    .el-menu-item {
      border-left: 4px solid transparent;

      &.is-active {
        border-color: @--color-primary;
        background-color: @--color-primary-light-9;
      }
    }
  }
</style>
